<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/css.css" />
    <title>练习</title>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
      </tr>
    </table>

    <div id="formDiv">
      <h4>添加新员工</h4>

      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="empName" id="empName" />
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email" />
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">Submit</button>
          </td>
        </tr>
      </table>
    </div>
    <script>
      var alist = document.getElementsByTagName("a");
      let tableEle = document.getElementById("employeeTable");

     
      
      


      /* 
        注意点：
        * 超链接点击的默认属性会跳转，如果不想跳转的话可以return false
        *tr的parentNode不是table 而是tr.parentNode
      
      */
      for (let i = 0; i < alist.length; i++) {
         alist[i].onclick = function () {
             var tr = this.parentNode.parentNode;
              var tdValue = tr.children[0].innerHTML;
             if( confirm(`确定删除${tdValue}吗?`)){
                del(tr.parentNode,tr);
             }

             return false;
            
        };
        
      }


      addEmpButton.onclick =function(){

        let empName = document.getElementById("empName").value;
        let email = document.getElementById("email").value;
        let salary = document.getElementById("salary").value;
       let addEmpButton = document.getElementById("addEmpButton");

        
          var  tr =document.createElement("tr");

          tr.innerHTML=`    <td>${empName}</td>
                            <td>${email}</td>
                            <td>${salary}</td>
                            <td><a href="javascrip:;">Delete</a></td>`

                            tableEle.appendChild(tr);     
                            
                            
                            for (let i = 0; i < alist.length; i++) {
         alist[i].onclick = function () {
             var tr = this.parentNode.parentNode;
              var tdValue = tr.children[0].innerHTML;
             if( confirm(`确定删除${tdValue}吗?`)){
                del(tr.parentNode,tr);
             }

             return false;
            
        };
        
      }


      }


      function del(parentEle,removeEle){
          parentEle.removeChild(removeEle);
         
      }
    </script>
  </body>
</html>

